<template>
  <div>
    <vxe-modal
      :title="$t('common.action.detail')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="60vw"
      height="480px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
    >
      <!-- 主体部分：详情展示 -->
      <el-descriptions
        direction="horizontal"
        :column="2"
        border
        :label-width="120"
      >
        <el-descriptions-item
          :label="$t('menu.dev.menu.field.parent', '所属菜单')"
          v-if="formData.parent"
        >
          {{ formData.parent?.name }}
        </el-descriptions-item>

        <el-descriptions-item :label="$t('menu.dev.menu.field.type', '类型')">
          <ra-dict-label
            v-model="formData.type"
            code="sys_menu_type"
          ></ra-dict-label>
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.code', '权限代码')"
        >
          {{ formData.code }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.permission', '数据权限')"
        >
          <ra-dict-label
            v-model="formData.permission"
            code="status_options"
          ></ra-dict-label>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('menu.dev.menu.field.name', '名称')">
          {{ formData.name }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.controller', '控制器')"
          v-if="formData.type != MenuTypeEnum.EXTLINK"
        >
          {{ formData.controller }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.route_name', '路由名称')"
          v-if="formData.type === MenuTypeEnum.MENU"
        >
          {{ formData.route_name }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.route_path', '相对路径')"
          v-if="formData.type != MenuTypeEnum.EXTLINK"
        >
          {{ formData.route_path }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.component', '组件路径')"
          v-if="formData.type != MenuTypeEnum.EXTLINK"
        >
          {{ formData.component }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.template', '页面模板')"
          v-if="formData.type == MenuTypeEnum.MENU"
        >
          <ra-dict-label
            v-model="formData.template"
            code="sys_template"
          ></ra-dict-label>
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.connect', '连接')"
          v-if="formData.type === MenuTypeEnum.MENU"
        >
          {{ formData.connect }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.table_name', '表名')"
          v-if="formData.type === MenuTypeEnum.MENU"
        >
          {{ formData.table_name }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.primary_key', '主键')"
          v-if="formData.type === MenuTypeEnum.MENU"
        >
          {{ formData.primary_key }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.visible', '显示')"
        >
          <ra-dict-label
            v-model="formData.visible"
            code="yes_or_not_options"
          ></ra-dict-label>
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.always_show', '总显示')"
        >
          <ra-dict-label
            v-model="formData.always_show"
            code="yes_or_not_options"
          ></ra-dict-label>
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.keep_alive', '缓存')"
          v-if="formData.type === MenuTypeEnum.MENU"
        >
          <ra-dict-label
            v-model="formData.keep_alive"
            code="yes_or_not_options"
          ></ra-dict-label>
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.redirect', '重定向')"
          v-if="formData.type === MenuTypeEnum.CATALOG"
        >
          {{ formData.redirect }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.extlink', '外链地址')"
          v-if="formData.type === MenuTypeEnum.EXTLINK"
        >
          {{ formData.route_path }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.iframe_url', '页面地址')"
          v-if="formData.type === MenuTypeEnum.IFRAME"
        >
          {{ formData.redirect }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.menu.field.params', '路由参数')"
          v-if="formData.type === MenuTypeEnum.MENU"
        >
          {{ formData.params }}
        </el-descriptions-item>

        <!-- config -->
        <el-descriptions-item
          :label="$t('menu.dev.field.field.config', '高级配置')"
        >
          <pre>{{ JSON.stringify(formData.config, null, 2) }}</pre>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('common.field.sort', '排序')">
          {{ formData.sort }}
        </el-descriptions-item>

        <!-- 创建时间和更新时间（如果有的话） -->
        <el-descriptions-item
          :label="$t('common.field.create_time', '创建时间')"
          v-if="formData.create_time"
        >
          {{ formData.create_time }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('common.field.update_time', '更新时间')"
          v-if="formData.update_time"
        >
          {{ formData.update_time }}
        </el-descriptions-item>
      </el-descriptions>
    </vxe-modal>
  </div>
</template>

<script setup>
// 设置选项式 API 的内容
defineOptions({
  // 组件名称
  name: 'DevMenuDetail',
  // 阻止透传非 props 属性
  inheritAttrs: false,
});

import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import { MenuTypeEnum } from '@/enums';
import MenuAPI from '@/api/admin/dev/menu';

// 获取国际化函数
const { t } = useI18n();
// 是否显示载入效果
const loading = ref(false);
// 是否显示
const show = ref(false);
// 数据库连接
const connectOptions = ref([]);
// 表单数据
const formData = reactive({
  id: null,
  pid: null,
  type: 1,
  name: '',
  icon: '',
  code: null,
  permission: null,
  controller: '',
  route_name: '',
  route_path: '',
  component: '',
  visible: 1,
  keep_alive: 1,
  always_show: 1,
  connect: 'mysql',
  table_name: '',
  params: '',
  redirect: '',
  remark: '',
  status: 1,
  sort: null,
  createTime: null,
  updateTime: null,
});

// 初始化表单数据
const initFormData = () => {
  Object.assign(formData, {
    id: null,
    pid: null,
    type: 1,
    name: '',
    icon: '',
    code: null,
    permission: null,
    controller: '',
    route_name: '',
    route_path: '',
    component: '',
    visible: 1,
    keep_alive: 1,
    always_show: 1,
    connect: 'mysql',
    table_name: '',
    params: '',
    redirect: '',
    remark: '',
    status: 1,
    sort: null,
    createTime: null,
    updateTime: null,
  });
};

// 加载详情数据
const loadDetailData = async (id) => {
  if (!id) {
    console.warn('ID不能为空');
    return;
  }

  try {
    loading.value = true;
    const params = { id };
    const { data } = await MenuAPI.detail(params);

    if (data) {
      Object.assign(formData, data);
    } else {
      ElMessage.warning($t('common.info.not_found'));
      initFormData();
    }
  } catch (error) {
    console.error('Error loading detail data:', error);
    ElMessage.error($t('common.message.info.load_failed'));
    initFormData();
  } finally {
    loading.value = false;
  }
};

/**
 * 暴露方法
 */
defineExpose({
  show(id) {
    // 获得数据库连接的选项数据
    MenuAPI.getConnects().then(({ data }) => {
      connectOptions.value = data;
    });

    // 先显示模态框
    show.value = true;

    // 初始化数据
    initFormData();

    // 加载详情数据
    if (id) {
      loadDetailData(id);
    } else {
      console.warn($t('common.message.info.no_selected'));
      ElMessage.warning($t('common.message.info.no_selected'));
    }
  },
});

// 监听show变化，关闭时清理数据
watch(show, (newVal) => {
  if (!newVal) {
    // 模态框关闭时清理数据
    nextTick(() => {
      initFormData();
    });
  }
});
</script>

<style lang="scss" scoped>
.desc-label-width {
  width: 100px;
}

.content-text {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

// 加载状态样式
:deep(.el-loading-mask) {
  border-radius: 4px;
}
</style>
